<template>
  <div class="lsc-time">
    <div>{{ fmtTime }}</div>
    <div v-if="isShowDate">{{ fmtDate }}</div>
  </div>
</template>

<script>
export default {
  name: "LscTime",
  props: {
    isShowDate: {
      type: Boolean,
      default: true
    },
    isShowSec: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      date: {}
    }
  },
  methods: {
    twoFmt(num) {
      let len = (num + '').length
      return ('00' + num).substring(len)
    },
    getFormatTime() {
      let time = new Date();
      let year = time.getFullYear()
      let month = this.twoFmt(time.getMonth())
      let day = this.twoFmt(time.getDate())
      let hours = this.twoFmt(time.getHours())
      let minutes = this.twoFmt(time.getMinutes())
      let second = this.twoFmt(time.getSeconds())

      this.date = {
        year,
        month,
        day,
        hours,
        minutes,
        second,
      };
    },
  },
  computed: {
    fmtDate() {
      let date = this.date
      return `${date.year}-${date.month}-${date.day}`
    },
    fmtTime() {
      let date = this.date
      if (this.isShowSec) return `${date.hours}:${date.minutes}:${date.second}`
      return `${date.hours}:${date.minutes}`
    }
  },
  created() {
    this.getFormatTime()
  },
  mounted() {
    // setInterval(this.getDate,1000)
  }
}
</script>

<style scoped>
.lsc-time{
  display: flex;
  text-align: center;
}
.lsc-time>div{
  flex: 1;
}
</style>
